<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
        a:hover {
            text-decoration:none}
        a:active {
            text-decoration:none}
    </style>
</head>
<body>
<div id="app">

    <el-button type="primary" @click="dialogFormVisible = true">添加新的公司</el-button>
    <el-select
            @change="getCity" v-model="keyWordOfProvince" placeholder="请选择省份">
    <el-option
            v-for="item in company_province"
            :key="item"
            :label="item"
            :value="item"
            >
    </el-option>
    </el-select>
    <el-select @change="getArea" v-model="keyWordOfCity" placeholder="请选择城市">
        <el-option
                v-for="item in company_city"
                :key="item"
                :label="item"
                :value="item"
                >
        </el-option>
    </el-select>
    <el-select v-model="keyWordOfArea" placeholder="请选择地区">
        <el-option
                v-for="item in company_area"
                :key="item"
                :label="item"
                :value="item"
        >
        </el-option>
    </el-select>
    <el-input v-model="keyWord" style="width: 140px"></el-input>
    <el-button type="primary" @click="search">查 询</el-button>
    <!--    数据表格-->
    <el-table
            :data="tableData"
            style="width: 100%">
        <el-table-column
                label="公司编号"
        >
            <template slot-scope="scope">
                <span >{{scope.row.id}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司名称"
        >
            <template slot-scope="scope">
                <span>{{ scope.row.companyName }}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="公司地址"
        >
            <template slot-scope="scope">
                <span >{{ scope.row.companyAddress}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="主要经营"
        >
            <template slot-scope="scope">
                <span >{{scope.row.businessScope}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系人"
        >
            <template slot-scope="scope">
                <span >{{scope.row.legal}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="联系电话"
        >
            <template slot-scope="scope">
                <span >{{scope.row.legalTel}}</span>
            </template>
        </el-table-column>
        <el-table-column
                label="备注"
        >
            <template slot-scope="scope">
                <span >{{scope.row.companyIntroduction}}</span>
            </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="companyEdit(scope.$index,scope.row)">编辑</el-button>
                <el-button
                        size="mini"
                        type="danger"
                        @click="">订购</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            small
            layout="prev, pager, next"
            @current-change="loadPage"
            :total="total"
            :current-page="current"
            :page-size="pageSize">
    </el-pagination>
    <el-dialog title="公司信息管理" :visible.sync="dialogFormVisible" @close="closeMyDialog">
        <el-form :model="company">
            <el-form-item label="公司名" :label-width="formLabelWidth">
                <el-input v-model="company.companyName"  autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司所在省份" :label-width="formLabelWidth">
            <el-select
                    @change="getCompanyCity" v-model="company.companyProvince" placeholder="请选择省份">
                <el-option
                        v-for="item in company_province"
                        :key="item"
                        :label="item"
                        :value="item"
                >
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="公司所在城市" :label-width="formLabelWidth">
            <el-select @change="getCompanyArea" v-model="company.companyCity" placeholder="请选择城市">
                <el-option
                        v-for="item in company_city"
                        :key="item"
                        :label="item"
                        :value="item"
                >
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="公司所在区" :label-width="formLabelWidth">
            <el-select v-model="company.companyArea" placeholder="请选择地区">
                <el-option
                        v-for="item in company_area"
                        :key="item"
                        :label="item"
                        :value="item"
                >
                </el-option>
            </el-select>
            </el-form-item>
            <el-form-item label="公司具体地址" :label-width="formLabelWidth">
                <el-input v-model="company.companyAddress" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="主要营业" :label-width="formLabelWidth">
                <el-input v-model="company.businessScope" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司照片" :label-width="formLabelWidth">
                <el-upload
                        class="avatar-uploader"
                        action="/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess">
                    <img style="width: 100px;height: 100px" v-model="company.companyImage" v-if="company.companyImage" :src="company.companyImage" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="联系人" :label-width="formLabelWidth">
                <el-input v-model="company.legal" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" :label-width="formLabelWidth">
                <el-input v-model="company.legalTel" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电子邮箱" :label-width="formLabelWidth">
                <el-input v-model="company.companyEmail" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司类型" :label-width="formLabelWidth">
                <el-input v-model="company.companyType" autocomplete="off"></el-input>
            </el-form-item>
             <el-form-item label="公司QQ" :label-width="formLabelWidth">
                <el-input v-model="company.companyQq" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司微信" :label-width="formLabelWidth">
                <el-input v-model="company.companyWechat" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="公司状态" :label-width="formLabelWidth">
                <el-radio v-model="company.companyStatus" label="on">营业</el-radio>
                <el-radio v-model="company.companyStatus" label="off">非营业</el-radio>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="saveCompany()">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/js/area/area.js"></script>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:"#app"
        ,data(){
            return{
                company_province:[],
                company_city:[],
                company_area:[],
                tableData:null,
                total:0,
                current:1,
                pageSize:10,
                dialogFormVisible:false,
                formLabelWidth:"120px",
                company:{
                    id:'',
                    companyName:'',
                    legal:'',
                    legalTel:'',
                    companyEmail:'',
                    companyQq:'',
                    companyWechat:'',
                    companyType:'',
                    businessScope:'',
                    companyProvince:'',
                    companyCity:'',
                    companyArea:'',
                    companyAddress:'',
                    companyImage:'',
                    companyStatus:'',
                },
                keyWordOfProvince:'',
                keyWordOfCity:'',
                keyWordOfArea:'',
                keyWord:'',
            }
        },methods:{
            loadPage(current)
            {
                this.current = current;
                axios.get("/company/" + current).then(value => {
                    if (value.data.code == 1) {
                this.tableData = value.data.data.records;
                this.total = value.data.data.total;
                this.current = value.data.data.current;
                this.pageSize = value.data.data.pageSize;
            }
            });
            },
            handleAvatarSuccess(res, file) {
                this.company.companyImage ="http://192.168.31.100/images/"+res.data;
            },
            companyEdit(index,row){
                //使用JSON.parse和JSON.stringify可以将数据以JSON形式赋给当前对象
                this.company=JSON.parse(JSON.stringify(row))
                this.dialogFormVisible=true;
            },
            saveCompany(){
                if(this.company.id==''){
                    axios.post("/company",this.company).then(value => {
                        if(value.data.code == 1){
                        this.loadPage(this.current);
                        this.$message(value.data.msg);
                    }
                });
                }else{
                    axios.put("/company",this.company).then(value => {
                        if(value.data.code==1){
                        this.loadPage(this.current)
                        this.$message(value.data.msg);
                    }
                });
                }
                this.dialogFormVisible=false;
            },
            closeMyDialog(){
                this.company={   //关闭对话框时更改product属性
                        id:'',
                        companyName:'',
                        legal:'',
                        legalTel:'',
                        companyEmail:'',
                        companyQq:'',
                        companyWechat:'',
                        companyType:'',
                        businessScope:'',
                        companyProvince:'',
                        companyCity:'',
                        companyArea:'',
                        companyAddress:'',
                        companyImage:'',
                        companyStatus:'',
                }
            },getCity(){
                this.keyWordOfCity='';
                this.company_city=[];
                this.keyWordOfArea='';
                this.company_area=[];
                for (var i of city){
                    if (this.keyWordOfProvince==i.name){
                        for(var j of i.city){
                            this.company_city.push(j.name);
                        }
                    }
                }
            },getArea(){
                this.keyWordOfArea='';
                this.company_area=[];
                for (var i of city){
                    if (this.keyWordOfProvince==i.name){
                        for(var j of i.city){
                            if (this.keyWordOfCity==j.name){
                                for(var k of j.area){
                                    this.company_area.push(k);
                                }
                            }
                        }
                    }
                }
            },getCompanyCity(){
                this.company.companyCity='';
                this.company_city=[];
                this.company.companyArea='';
                this.company_area=[];
                for (var i of city){
                    if (this.company.companyProvince==i.name){
                        for(var j of i.city){
                            this.company_city.push(j.name);
                        }
                    }
                }
            },getCompanyArea(){
                this.company.companyArea='';
                this.company_area=[];
                for (var i of city){
                    if (this.company.companyProvince==i.name){
                        for(var j of i.city){
                            if (this.company.companyCity==j.name){
                                for(var k of j.area){
                                    this.company_area.push(k);
                                }
                            }
                        }
                    }
                }
            }
            ,search(){
                axios.get("/company/"+(this.keyWord!=''?this.keyWord:' ')+"/"+
                    (this.keyWordOfProvince!=''?this.keyWordOfProvince:' ')+"/"
                    +(this.keyWordOfCity!=''?this.keyWordOfCity:' ')+"/"
                    +(this.keyWordOfArea!=''?this.keyWordOfArea:' ')+"/"+1).then(value=>{
                    if(value.data.code==1){
                    this.tableData = value.data.data.records;
                    this.total = value.data.data.total;
                    this.current = value.data.data.current;
                    this.pageSize = value.data.data.pageSize;
                }
                });
            }
        },
        mounted(){
            for (var i of city){
                this.company_province.push(i.name);
            }
            // console.log(city);
            this.loadPage(1);
        }
    })
</script>
</html>